<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />

    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj"
        href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">

                <h2>单行浮动</h2>

                <p>浮动元素要写在前面。</p>
                <div class="box2 center" style="width: 310px;text-align:center;">
                    <div style="float:left;">&lt;</div>
                    <div style="float:right;">⌂</div>
                    Title
                </div>

                <h2>相对/绝对布局</h2>

                <p>外面为 position: relative；里面构建坐标系，position: absolute。</p>
                <div class="box2 center" style="position: relative; width: 300px; height: 150px;">
                    position: relative
                    <div class="box2"
                        style="position: absolute; background-color: yellow; width: 60px; height: 50px; bottom: 20px; left: 30px;">
                        position:
                        absolute</div>
                </div>

                <h2>标题过长省略号</h2>

                <p>需要设置文本宽度。</p>
                <style>
                    .noWarp li {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                </style>
                <div class="center">
                    <ul class="list noWarp">
                        <li style="width: 150px;">国土部严查小产权房拆除一批查处一批追究一批</li>
                        <li>学规定 强素质 促发展——XXXX集团员工认真学习【员工手册】</li>
                    </ul>
                </div>
                <p>标题过长省略号（多行） 目前仅支持 webkit 浏览器。</p>
                <div class="center box2"
                    style="width: 90%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; ">
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
                    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
                    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                </div>

                <h2>左右居中</h2>
                <p>块元素设置 margin: 0 auto；文字、图片设置 text-align:center;</p>
                <p>单行文字与块元素垂直居中，设置块元素 line-height 与 height 一致即可。</p>
                <p>单行文字混合图片，图片设置 vertical-align: middle</p>
                <div class="box2 center" style="width: 300px;">
                    “茶道”为日本传统美学之精髓，<img style="vertical-align: middle" height="50" src="book.jpg" />
                    作者文笔清雅隽永，蕴藏文人气息，带领读者一窥日本古典美学的世界。
                </div>
                <br />
                <p>使用 display: table-cell; 单元格居中</p>
                <div class="box2 center" style="width:300px;">
                    <div
                        style="display: table-cell; vertical-align: middle; overflow: hidden; height: 100px; width: 300px;">
                        留言内容：Your Feedback
                    </div>
                </div>

                <h2>垂直文本</h2> 
                <div class="box2 center" style="margin-top:10px;width: 22px; height: 100px; text-align: center;">
                    aa
                    <div style="transform: rotate(90deg);">500</div>
                </div>
                <h2>常见字符</h2>

                <p>&amp; &lt; &gt; &quot; » → ⇒ ⇄ ↑ ↩ ⤢ ↱ ↷ ↻ ► ☛ © ® ™ • · » § ×</p>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
</body>

</html>